<template>
  <div style="height: 100%">
  <el-container style="height: 100%">
    <el-aside width="200px">
      <Menu></Menu>
    </el-aside>
    <el-container>
      <el-main style="font-size:30px ">
        <h3>环境管理 <span style="color: grey;font-size: xx-small">（此页面请不要随意删除环境）</span></h3>
        <el-table
                  :data='env_list_data'
                  stripe
                  border
                  style="min-width: 100%;overflow-y: auto">
          <el-table-column
            prop=id
            label="ID"
            width="100">
          </el-table-column >

          <el-table-column
            prop=type
            label="标签"
            width="200"
          >
  <template slot-scope="scope">
    <el-tag>{{scope.row.type}}</el-tag>

  </template>
          </el-table-column>


           <el-table-column
            prop=host
            label="域名"
            width="350">

          </el-table-column>
          <el-table-column
            prop=des
          label="描述">
          </el-table-column>
          <el-table-column >
            <template slot="header">
              <el-button type="primary" @click="diangFormVisille=true">
                     创建环境
              </el-button>
                </template>
                 <template slot-scope="scope">
                 <el-button size="mini"
                            type="danger"
                            @click="delete_ev(scope.row.id )"
                            v-if="">
                     删除
                   </el-button>
                </template>
          </el-table-column>

        </el-table>
      </el-main>
    </el-container>
  </el-container>
    <el-dialog title="创建环境" :visible.sync="diangFormVisille">
          <el-form :model="form">
            <el-form-item label="标签" label-width="80px">
              <el-input v-model="form.type">

              </el-input>
            </el-form-item >
             <el-form-item label="描述" label-width="80px">
              <el-input v-model="form.des">

              </el-input>
            </el-form-item>
            <el-form-item label="环境地址" label-width="80px">
              <el-input v-model="form.host">

              </el-input>
            </el-form-item>

          </el-form>
      <div slot="footer" class="el-dialog__footer">
        <el-button @click="Add_env">确认</el-button>
        <el-button type="primary" @click="diangFormVisille=false">取消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
    import Menu from '../components/Menu.vue'
    import axios from 'axios'
  export default {

  name: "env.vue",
  //  参数 变量数据初始化
  data(){
    return{
      env_list_data:[/*{id:1,type:'www.baidu.com'}*/],
      diangFormVisille:false,
      form:{host:'http://',
        type:'',
        des:'',
      }
    }
  },
    methods:{
    Add_env(){
      this.diangFormVisille=false;
      axios.post('http://localhost:8000/Add_env/',this.form).then(res=>{
                this.env_list_data=res.data
                this.$message ({message:'创建成功',
                type:'success'})
      })
    },
    delete_ev(en_id){
      axios.get('http://localhost:8000/delete_ev/',{
        params:{en_id:en_id}
      }).then(res=>{
        this.env_list_data=res.data
        this.$message({
          message:'删除成功',
          type:"error",
        })
      })
    }

    },
    mounted() {axios.get('http://localhost:8000/get_envlist/').then(res=>{
      this.env_list_data=res.data
    })},

    components:{
  Menu}
  }
</script>

<style >
    .el-table .warning-row {
        background: #d0ab5c;
      }

      .el-table .success-row {
        background: #5d943d;
      }
    .el-header{
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }

  .el-asides {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  /*.el-mains {*/
  /*  background-color: #E9EEF3;*/
  /*  color: #333;*/
  /*  text-align: center;*/
  /*  line-height: 160px;*/
  /*}*/
</style>